<template>
  <div class="userDetails" v-if="userInfo">
    <table cellpadding="0" cellspacing="0" class="userInfoDetails">
      <tr>
        <td class="userImg"><img :src="userInfo.profile.avatarUrl" :alt="userInfo.profile.nickname"></td>
        <td>
          <ul class="userInfo">
            <li>
              <b class="username">{{userInfo.profile.nickname}}</b>
              <el-button class="privateLetter"><i class="el-icon-message"></i>&nbsp;发私信</el-button>
              <el-button v-if="!isFollow" @click="followUser(userInfo.userPoint.userId)"><i class="el-icon-plus"></i>&nbsp;关注</el-button>
              <el-button v-if="isFollow" @click="followUser(userInfo.userPoint.userId)">取消关注</el-button>
              <span style="display:none">{{userSongListCount = userInfo.profile.playlistCount}}</span>
              <el-button class="toSongerDetails" v-if="userInfo.profile.artistId" @click="toSongerDetails(userInfo.profile.artistId)">查看歌手页</el-button>
            </li>
            <li>
              关注：{{userInfo.profile.follows}}
              <el-divider direction="vertical"></el-divider>
              粉丝：{{userInfo.profile.followeds}}
            </li>
            <li class="usergs" v-if="userInfo.profile.gender == 1">性别：男</li>
            <li class="usergs" v-if="userInfo.profile.gender == 2">性别：女</li>
            <li class="usergs" v-if="userInfo.profile.signature != ''">个人介绍：{{userInfo.profile.signature}}</li>
          </ul>
        </td>
      </tr>
    </table>
    <h3>{{userInfo.profile.nickname}}创建的歌单（{{createdSongList.length}}）</h3>
    <el-row :gutter="20" type="flex" class="myrow">
      <el-col :span="4" v-for="(item,i) in createdSongList" :key="i">
        <img class="listImg" :src="item.coverImgUrl" :alt="item.name" @click="toSongListDetails(item.id)">
        <div class="listName" :title="item.name" @click="toSongListDetails(item.id)">{{item.name}}</div>
        <div class="pbCount">播放量：{{formatNumber(item.playCount)}}</div>
      </el-col>
    </el-row>
    <h3>{{userInfo.profile.nickname}}收藏的歌单（{{collectSongList.length}}）</h3>
    <el-row :gutter="20" type="flex" class="myrow">
      <el-col :span="4" v-for="(item,i) in collectSongList" :key="i">
        <img class="listImg" :src="item.coverImgUrl" :alt="item.name" @click="toSongListDetails(item.id)">
        <div class="listName" :title="item.name" @click="toSongListDetails(item.id)">{{item.name}}</div>
        <div class="pbCount">播放量：{{formatNumber(item.playCount)}}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserDetails, getUserSongList } from '../../../network/home'
import { getUserFollowUser, followUser } from "../../../network/user";

export default {
  name: "UserDetails",
  data() {
    return {
      userInfo: "",
      userSongListCount: "",
      createdSongList: [],
      collectSongList: [],
      isFollow: "",
    }
  },
  created() {
    this.getUserDetails(this.$route.params.id);
    this.getUserSongList(this.$route.params.id, 9999999);
  },
  methods: {
    getUserDetails(id) {
      getUserDetails(id).then(res => {
        //console.log(res.data);
        this.userInfo = res.data;
        this.getUserFollowUser(res.data.userPoint.userId);
      })
    },
    getUserSongList(id, limit) {
      getUserSongList(id, limit).then(res => {
        //console.log(res.data.playlist);
        this.createdSongList = res.data.playlist.slice(0, this.userSongListCount);
        this.collectSongList = res.data.playlist.slice(this.userSongListCount);
        //console.log(this.createdSongList);
        //console.log(this.collectSongList);
      })
    },
    getUserFollowUser(userId) {
      getUserFollowUser(localStorage.getItem("username"), userId).then(res => {
        this.isFollow = res.data;
      })
    },
    followUser(userId) {
      followUser(localStorage.getItem("username"), userId).then(res => {
        this.isFollow = res.data;
      });
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
    },
    toSongListDetails(id) {
      this.$router.push({ name: "SongListDetail", params: { id: id } });
    },
    formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + '';
      } else
        if (num > 1 && num < 10000) {
          return num + '';
        } else {
          return (num / 10000).toFixed(1) + '万';
        }
    }
  }
}
</script>

<style scoped>
.userDetails {
  width: 75%;
  height: 100%;
  margin: 0 auto;
}
.userInfoDetails {
  width: 100%;
  height: 100%;
}
.userImg {
  width: 150px;
  height: 150px;
  border: 1px solid RGB(204, 204, 204);
  padding: 5px;
}
.userImg img {
  width: 100%;
  height: 100%;
}
.username {
  font-size: 1.8rem;
}
.privateLetter {
  margin-left: 1.2rem;
}
.toSongerDetails {
  float: right;
}
.userInfo {
  list-style-type: none;
}
.userInfo li {
  margin-bottom: 0.8rem;
}
.usergs {
  font-size: 0.8rem;
  color: RGB(153, 153, 153);
}
.listImg {
  width: 90%;
  height: 90%;
}
.listName {
  font-size: 1rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.listName:hover {
  color: RGB(64, 158, 255);
}
.pbCount {
  font-size: 1rem;
  width: 100%;
  color: RGB(153, 153, 153);
  margin-bottom: 1.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  background-color: #f9fafc;
}
.myrow {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}
</style>